<template>
  <div class="container">
    <van-nav-bar
      title="首件检检验录入"
      fixed
      class="titleStyle"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-button
      class="saveBtn"
      type="primary"
      native-type="submit"
      @click="submitForm"
      >提交</van-button
    >
    <div class="publicBox">
      <div class="checkInputTop">
        <div class="checkInputTopCont">
          <h1>
            <span>送检工序：{{ `${detailsObj.procedureName}` }}</span>
          </h1>
          <ul>
            <li>
              <div>
                <b>工单批次号</b>
                <em>
                  <van-field
                    v-model="ruleForm.planBatchNo"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>班次</b>
                <em>
                  <van-field
                    v-model="ruleForm.shiftScheduleName"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>料号</b>
                <em>
                  <van-field
                    v-model="ruleForm.materialCode"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>品名</b>
                <em>
                  <van-field
                    v-model="ruleForm.materialName"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>规格型号</b>
                <em>
                  <van-cell-group>
                    <van-field
                      v-model="ruleForm.specifications"
                      readonly
                      size="mini"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>数量</b>
                <em>
                  <van-field
                    v-model="ruleForm.selfCheckNum"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>自检结果</b>
                <em>
                  <van-radio-group
                    v-model="ruleForm.status"
                    class="radioStyle"
                    direction="horizontal"
                  >
                    <van-radio :name="1" shape="square">合格</van-radio>
                    <van-radio :name="2" checked-color="red" shape="square"
                      >不合格</van-radio
                    >
                  </van-radio-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>检验结果</b>
                <em>
                  <van-radio-group
                    v-model="ruleForm.checkStatus"
                    class="radioStyle"
                    direction="horizontal"
                  >
                    <van-radio :name="1" shape="square">合格</van-radio>
                    <van-radio :name="2" checked-color="red" shape="square"
                      >不合格</van-radio
                    >
                  </van-radio-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b> </b>
                <em>
                  <van-button type="info" @click="showImagePdf = true">查看图档</van-button>
                </em>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="checkContent">
        <el-table
          :style="{
            borderColor: '#ccc',
            'border-right': '1px solid #ccc',
            'border-bottom': '1px solid #ccc',
          }"
          :data="tableData"
          border
          height="100%"
          :cell-style="{ borderColor: '#ccc' + ' !important' }"
          :header-cell-style="{
            background: '#fff !important',
            borderColor: '#ccc' + ' !important',
          }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50px"
            align="center"
          />
          <el-table-column
            align="center"
            prop="itemName"
            label="检验项"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="toolName"
            label="检验工具"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="accpetRanger"
            label="合格范围"
            width="160px"
          >
          </el-table-column>
          <el-table-column label="实测值" align="center" width="160px">
            <template #default="{ row }">
              <van-field
                v-if="row.isAuto === 0"
                v-model="row.actualValue"
                @blur="($event) => inputBlur($event, row)"
                type="number"
                placeholder="请输入数字"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="decide"
            label="检验结果"
            width="200px"
          >
            <template #default="{ row }">
              <!-- :disabled="row.isAuto === 0" -->
              <van-radio-group
                v-model="row.result"
                class="radioStyle"
                direction="horizontal"
                @change="($e) => onchange($e, row)"
              >
                <van-radio :name="1" shape="square">合格</van-radio>
                <van-radio :name="0" checked-color="red" shape="square"
                  >不合格</van-radio
                >
              </van-radio-group>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="difference"
            label="标准值"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="upperDifference"
            label="上差"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="lowerDifference"
            label="下差"
            min-width="100px"
            show-overflow-tooltip
          />

          <el-table-column
            align="center"
            prop="isAutoStr"
            label="判定方式"
            min-width="100px"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>
    <van-overlay :show="showImagePdf" @click="show = false">
      <van-swipe @change="onChangeSwipe">
        <van-swipe-item v-for="(item, i) in fileList" :key="i">
          <div class="item" v-if="item.type == 'pdf'">
            <PDF :pdfUrl="item.url" style="width: 100%; height: 100%" />
          </div>
          <div class="item" v-if="item.type == 'video/mp4'">
            <video :src="item.url" style="width: 100px; height: 100px" />
          </div>
          <div class="item" v-else>
            <van-image
              :src="item.url"
              fit="contain"
              width="100%"
              height="100%"
            />
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>
    </van-overlay>
  </div>
</template>

<script>
import PDF from "./PDF.vue";
export default {
  name: "FirstCheckInput",
  components: {
    PDF,
  },
  data() {
    return {
      // Add your component data here
      detailsObj: {},
      ruleForm: {},
      tableData: [],
      showImagePdf: false,
      current: 0,
      fileList: [
        {
          type: "pdf",
          url: "http://10.20.32.33:9000/mes-test/pdf/708d658dca1a8519c2cef2dc598e6001.pdf",
        },
        {
          type: "png",
          url: "https://img01.yzcdn.cn/vant/apple-1.jpg",
        },
        {
          type: "jpg",
          url: "https://img01.yzcdn.cn/vant/apple-2.jpg",
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 输入框失焦
    inputBlur(event, row) {
      const { actualValue } = row;
      const { difference, upperDifference, lowerDifference } = row;
      if (actualValue === undefined || actualValue === null) return;
      let min = Number(difference) - Number(lowerDifference),
        max = Number(difference) + Number(upperDifference);
      row.result = actualValue >= min && actualValue <= max ? 1 : 0;
      // if (actualValue < min || actualValue > max) {
      //   return this.$dialog.alert({
      //     title: "提示",
      //     message: "实测值不在合格范围内",
      //   });
      // }
    },
    onchange(e, row) {
      console.log(e, row);

      // if (row.isAuto === 0) {
      //   row.result = e;
      // } else {
      //   row.result = null;
      // }
    },
    onChangeSwipe(index) {
      this.current = index;
    },
    // 获取数据
    async getData() {
      this.detailsObj = this.$store.state.data;
      const res = await this.$axios.post(
        `/dobo-product/pro/first/article/check/enterDetails?id=${this.$store.state.data.id}`
      );
      if (res?.data.code === 200) {
        const { firstArticleCheckDetailList } = res.data.data;
        res.data.data.checkStatus = null;
        this.ruleForm = res.data.data;
        firstArticleCheckDetailList.forEach((item) => {
          item.itemStr = `${item.itemName}【${item.itemCode}】`;
          item.actualValue =
            item.actualValue || +item.actualValue === 0
              ? item.actualValue
              : undefined;
          const { difference, upperDifference, lowerDifference } = item;
          if (item.isAuto === 0) {
            let min = (
              Number(difference) - Math.abs(Number(lowerDifference))
            ).toFixed(4);
            let max = (Number(difference) + Number(upperDifference)).toFixed(4);
            item.accpetRanger = `${min} ~ ${max}`;
          }
          item.isAutoStr = item.isAuto === 0 ? "自动判定" : "人工判定";
        });
        if (firstArticleCheckDetailList.length < 1) {
          return this.$dialog.alert({
            title: "提示",
            message: "当前工序首件检未配置检验项,请先配置检验项!",
          });
        }
        this.tableData = firstArticleCheckDetailList;
      }
    },
    submitForm() {
      if (this.ruleForm.checkStatus == null) {
        return this.$dialog.alert({
          title: "提示",
          type: "danger",
          message: "请选择检验结果!",
        });
      }
      // const flag = this.tableData.some(
      //   (item) =>
      //     (!item.difference && +item.difference !== 0) ||
      //     (!item.upperDifference && +item.upperDifference !== 0) ||
      //     (!item.lowerDifference && +item.lowerDifference !== 0)
      // );
      // if (flag) {
      //   return this.$dialog.alert({
      //     title: "提示",
      //     type: "danger",
      //     message:
      //       "检验项目存在检验值、上差、下差为空，请先前往工序检验标准菜单配置完整！",
      //   });
      // }
      // if (
      //   this.tableData.some(
      //     (item) =>
      //       !item.actualValue && item.actualValue !== 0 && item.isAuto === 0
      //   )
      // ) {
      //   return this.$dialog.alert({
      //     title: "提示",
      //     type: "danger",
      //     message: "存在检验项实测值为空!",
      //   });
      // }
      // if (this.tableData.some((item) => !item.result && item.result !== 0)) {
      //   return this.$dialog.alert({
      //     title: "提示",
      //     type: "danger",
      //     message: "存在检验结果为空!",
      //   });
      // }
      this.$dialog
        .confirm({
          title: "提示",
          message: "是否确认提交？",
        })
        .then(async () => {
          const res = await this.$axios.post(
            "/dobo-product/pro/first/article/check/enterDetailsUpdate",
            {
              ...this.ruleForm,
              firstArticleCheckDetailList: this.tableData,
            }
          );
          if (res.data.code == 200) {
            this.sendMessageToWetchat();
            this.$message.success("提交成功");
          } else {
            this.$toast.fail(res.data.msg);
          }
          setTimeout(() => {
            toast.clear();
            this.$router.push("/firstInspection");
          }, 1000);
        });
    },
    sendMessageToWetchat() {
      const result = this.ruleForm.checkStatus === 1 ? "合格" : "不合格";
      const params = {
        userIds: [this.ruleForm.createBy],
        message: `【首件检】单号【${this.ruleForm.carryCheckNo}】检验【${result}】`,
        type: 5,
      };
      this.$axios.post("/system/message/send", params).then((res) => {
        if (res && res.data.code === 200 && res.data.data === true) {
          this.$message.success("消息推送成功");
        } else {
          this.$message.error(res.data.msg, 15000);
        }
      });
    },
    // 返回
    onClickLeft() {
      const { query } = this.$route;
      if (query.path) {
        this.$router.push(`/${query.path}`);
      } else {
        this.$router.push("/firstInspection");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.van-overlay {
  z-index: 999;
}
.van-swipe-item {
  height: 90vh;
}
.item {
  width: 100%;
  height: 100%;
}
.container {
  .checkInputTopCont {
    padding: 5px;
    h1 {
      height: 35px;
      line-height: 35px;
      font-weight: normal;
      text-align: center;
      background: #eeee;
    }
    ul {
      li {
        width: 33.3333%;
        height: auto;
        b {
          width: 100%;
          text-align: left;
          height: 35px;
          line-height: 35px;
          font-size: 20px;
        }
        em {
          width: 100%;
          .van-cell {
            width: 98%;
          }
        }
      }
      // li:first-child {
      //   width: 100% !important;
      //   .van-cell {
      //     width: 98% !important;
      //   }
      // }
    }
  }
  .checkContent {
    border-left: 1px solid #ccc;
    height: calc(100vh - 520px);
    // overflow: hidden;
  }
  .checkInputBottomCont {
    ul {
      li {
        width: 50%;
      }
    }
  }
}
</style>
<style lang="scss">
// .van-radio__icon--disabled .van-icon {
//   background-color: #fff;
// }
// .van-radio__label--disabled {
//   color: #323233;
// }
// .van-radio__icon--disabled.van-radio__icon--checked .van-icon {
//   color: #fff;
//   background-color: red;
// }
.checkContent {
  .el-table .el-table__cell {
    padding: 5px 0;
    .van-cell {
      padding: 5px;
      border: 1px solid #ccc;
    }
  }
}
.decideClass1 {
  width: 100%;
  height: 100%;
  background: red;
}
.decideClass2 {
  width: 100%;
  height: 100%;
  background: green;
}
</style>